<template>
	<view class="home">
		<view class="topnav">
			<u-tabs
				:list="navList"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.08)'
				}"
				:inactiveStyle="{
					color: '#888',
					transform: 'scale(1)'
				}"
				@click="clickNav"
			></u-tabs>
		</view>
		<view v-show="loadingState" class="loadingState">
			<u-skeleton rows="4" title loading></u-skeleton>
		</view>
		<view class="content">
			<view class="item" v-for="item in dataList">
				<blog-item :item="item"></blog-item>
			</view>
		</view>
		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from "@dcloudio/uni-app"
	import {ref, onMounted} from 'vue'
	
	const db = uniCloud.database()
	
	const navList = ref([
		{
			name: '最新',
			type: 'publish_date'
		},
		{
			name: '热门',
			type: 'view_count'
		}
	])
	const loadingState = ref(true)
	const dataList = ref([])
	const navAction = ref(0)
	
	onLoad(() => {
		getData()
	})
	
	const getData = () => {
		let artTemp = db.collection('quanzi_article').field('title,user_id,description,picurls,comment_count,like_count,view_count,publish_date').getTemp()
		let userTemp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp()
		db.collection(artTemp, userTemp).orderBy(navList.value[navAction.value].type, 'desc').get().then(res => {
			dataList.value = res.result.data
			loadingState.value = false
		})
	}
	const clickNav = (e) => {
		navAction.value = e.index
		loadingState.value = true
		dataList.value = []
		getData()
	}
	// 跳转编辑
	const goEdit = () => {
		uni.navigateTo({
			url: '/pages/edit/edit'
		})
	}
</script>

<style lang="scss" scoped>
	.home {
		.topnav {
			margin-bottom: 30upx;
		}
		.loadingState {
			padding: 20upx;
		}
		.content {
			.item {
				padding: 30upx;
				border-bottom: 10upx solid #F7F7F7;
			}
		}
		.edit {
			width: 120upx;
			height: 120upx;
			background: #0199FE;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150upx;
			right: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20upx rgba(1, 153, 254, 0.8);
			.iconfont {
				font-size: 50upx;
			}
		}
	}
</style>
